@import (reference) "../../../color.less";
.trade-data-query(
  @content-background-color, @main-font-color, @second-font-color,
   @split-line-color, @loading-background
) {
  background: @content-background-color;
  transition: all .2s;
  .trade-data-query-table-container {
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    table {
      width: 100%;
      font-size: 12px;
      border-collapse: collapse;
      thead {
        color: @second-font-color;
        tr {
          height: 30px;
          td {
            text-align: right;
          }
          td:first-child {
            text-align: left;
          }
        }
      }
      tbody {
        color: @main-font-color;
        tr {
          height: 32px;
          border-bottom: 1px solid @split-line-color;
          td {
            text-align: right;
            button {
              font-size: 12px;
              color: #ffffff;
              padding: 0 4px;
              border-radius: 2px;
              background: @main-blue-color;
            }
          }
          td:first-child {
            text-align: left;
          }
          td[datatype="buy"] {
            color: @main-green-color
          }
          td[datatype="sell"] {
            color: @main-red-color
          }
        }
      }
    }
    .trade-data-query-table-pagination {
      position: absolute;
      top: 198px;
      right: 10px;
    }
    .trade-data-query-table-loading {
      height: 225px;
      background: @loading-background;
    }
    .trade-data-query-table-no-data {
      height: 225px;
      padding-top: 80px;
      text-align: center;
      font-size: 12px;
      color: @second-font-color;
    }
  }
}

.trade-data-query-night {
  .trade-data-query(
    @content-background-color-night,
    @main-font-color-night,
    @second-font-color-night,
    @split-line-color-night,
    rgba(0, 0, 0, .3)
  )
}

.trade-data-query-day {
  .trade-data-query(
    @content-background-color-day,
    @main-font-color-day,
    @second-font-color-day,
    @split-line-color-day,
    rgba(255, 255, 255, .3)
  )
}
